<template>
	<view>
		<qi-navtabbar>
			<view slot="center">购物车</view>
			<!-- <view @tap="Tap_Map">购物车地址</view> -->
		</qi-navtabbar>
		<view class="wuqi"></view>
		<view v-if="Object.keys(cart).length !== 0">
			<scroll-view scroll-y class="cartmianbox">
				<view
					class="listbox"
					:index="index"
					v-for="(item, index) in cart"
					:key="item.id"
				>
					<view class="itemimg" @click="checkBoxckbox(item)">
						<u-checkbox
							v-model="item.ckbox"
							shape="circle"
						></u-checkbox>
					</view>
					<view class="itembox">
						<view @tap="navTapdeta(item.id)"><image :src="item.cover_url"></image></view>
						<view class="itemright">
							<view>{{ item.title }}</view>
							<view>{{ item.description }}</view>
							<view class="inventory">
								库存
								<text>{{ item.stock }}</text>
							</view>
							<view class="itemnum">
								<text>￥{{ item.price }}</text>
								<view class="addnotify">
									<view @click="reduction(item)" class="reductioncs">
										-
									</view>
									<text class="reductioncs">
										{{ item.goods_count }}
									</text>
									<view @click="adding(item)" class="reductioncs">
										+
									</view>
									<view
										class="custom-icon custom-icon-shanchu"
										@tap="tapDel(item.id)"
									></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- </u-swipe-action> -->
			</scroll-view>
			<view class="mianbuttom">
				<view @click="checkboxChange">
					<u-checkbox v-model="radioncolum" shape="circle">
						全选
					</u-checkbox>
				</view>
				<view>
					合计：
					<b>{{ columnumgoods }}</b>
				</view>
				<view class="submitcss" @tap="Tapsubmit">去结算</view>
			</view>
		</view>
		<!-- 空白购物车的区域 -->
		<view class="empty-cart" v-else>
			<image src="/static/img/cart_empty.png"></image>
			<text class="tip-text">空空如也~</text>
		</view>
	<!-- 	<u-popup v-model="show" mode="center">
		</u-popup> -->
	</view>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import badgeMix from '@/mixins/tabbar-badge.js';
export default {
	mixins: [badgeMix],
	data() {
		return {
			radioncolum: true,
			show: false,
			addressList: '',
			defaultAdress: '',
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			]
		};
	},
	onLoad() {
		if (!this.$u.utils.isLogin()) return;
		// 全选全不选
		// this.radioncolum = this.isFullCheck;
		// 订单
		// this.getOrderAndAdress();
	},
	computed: {
		...mapState('m_cart', ['cart', 'radios']),
		...mapGetters('m_cart', ['checkedCount', 'total']),
		columnumgoods() {
			return (
				'￥' +
				this.cart
					.filter(item => {
						return item.ckbox;
					})
					.reduce((preValue, item) => {
						return preValue + item.price * item.goods_count;
					}, 0)
					.toFixed(2)
			);
		},
		isFullCheck() {
			return this.total === this.checkedCount;
		}
	},

	methods: {
		...mapMutations('m_cart', [
			'updateAllGoodsState',
			'removeGoodsById',
			'updateGoodsState'
		]),

		Tap_Map() {
			console.log(11);
			uni.navigateTo({
				url: '/pages/map/map'
			});
		},
		navTapdeta(e){
			uni.navigateTo({
				url:'/pages/goods/detail?id=' + e
			})
		},
		async getOrderAndAdress() {
			// 获取订单列表
			let res = await this.$u.api.handleCheckOrder();
			console.log(res);
			// 保存默认地址
			this.defaultAdress = res.address[0];
			console.log(this.defaultAdress);
			// // 保存地址列表和结算商品列表
			// this.goodsList = res.carts;
			this.addressList = res.address;
		},
		// 减
		reduction(item) {
			console.log(item);
			if (item.goods_count <= 1) {
				item.goods_count = 1;
			} else {
				item.goods_count--;
			}
		},
		// 加
		adding(item) {
			item.goods_count++;
			console.log(item);
		},
		click(id) {
			this.removeGoodsById(id);
			console.log(id);
		},
		// 删除
		async tapDel(id) {
			this.removeGoodsById(id);
		},
		// 单选
		checkBoxckbox(item) {
			console.log(this.total);
			console.log(this.checkedCount);
			this.updateGoodsState(item);
			this.radioncolum = this.isFullCheck;
		},
		// 全选
		checkboxChange() {
			if (this.radioncolum === true) {
				this.updateAllGoodsState(true);
			} else {
				this.updateAllGoodsState(false);
			}
		},
		async Tapsubmit() {
			const listnum = this.cart.filter(item => {
				return item.ckbox;
			});
			if (listnum.length === 0) {
				this.$u.toast('请选择商品');
				// this.show = true;
			}
			// 选中商品
			// let params = {
			// 	goods_id:this.goods.id,
			// 	num:this.total
			// }
			// await this.$u.api.handleAddCart(params);
			// 订单
			// const params = {
			//   address_id: this.defaultAdress.id,
			// };

			// // 提交订单
			// const res = await this.$u.api.handleSubmitOrder(params);
			// console.log(res);
			// let order = res.id
			// 		// 获取二维码
			// 		const wuqi = await this.$u.api.getpayaliyun(order,{type :'aliyun'})
			// 		console.log(wuqi);
			// uni.navigateTo({
			// 	url:'/pages/cart/order'
			// })
		}
	}
};
</script>
<style lang="scss" scoped>
.wuqi {
	// background-color: red;
	// width: 700rpx;
	// height: 100rpx;
}
.cartmianbox {
	height: calc(100vh - 200rpx - var(--window-bottom));

	// #ifdef MP
	height: calc(100vh - 200rpx - var(--window-bottom) - 20rpx);
	// #endif
}

.listbox {
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	margin-top: 2rpx;
}
.itemimg {
	width: 60rpx;
}
.inventory {
	display: flex;
	flex-direction: row-reverse;
	color: red;
}
.reductioncs {
	width: 80rpx;
	height: 40rpx;
	padding: 10rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f2f3f5;
	margin-right: 10rpx;
}
.addnotify {
	display: flex;
	align-items: center;
}
.itembox {
	padding: 10rpx 20rpx;
	margin-top: 10rpx;
	display: flex;
	width: calc(100vw - 40rpx);
	image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}
	.itemright {
		flex: 1;
		> view {
			margin-bottom: 10rpx;
		}
		
	}
	.itemnum {
		display: flex;
		justify-content: space-between;
	}
}
.empty-cart {
	height: calc(100vh - 200rpx - var(--window-bottom));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image {
		width: 300rpx;
		height: 300rpx;
	}
	.tip-text {
		font-size: 12px;
		color: gray;
		margin-top: 15px;
	}
}
.mianbuttom {
	position: fixed;
	bottom: var(--window-bottom);
	z-index: 99;
	height: 50px;
	width: 100%;
	padding: 0 10rpx;
	display: flex;
	align-items: center;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	view {
		display: flex;
		align-items: center;
	}
}
.submitcss {
	margin-right: 20rpx;
	width: 120rpx;
	height: 100rpx;
	border-radius: 10rpx;
	background-color: #a0cfff;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
